<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="报销单列表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>	
	  
    <view class="clist u-skeleton">
      <view class="list borderBottom" v-for="(li,index) in clist" :key="index"
        @click="gotoDetail(li.fId)">
        <view class="x-row userRow">
          <view class=" uimg">
            <image class="u-skeleton-circle" :src="$api.UserImg(li.fUserId)"></image>
          </view>
          <view class="x-col x-col-center">
            <view class="x-row" style="margin-bottom: 20rpx;">
              <view class="send x-col u-skeleton-fillet">
                报销人：{{li.fUserName}}
              </view>
              <!-- <view class="time">
								{{li.create_time}}
							</view> -->
            </view>

            <view class="cons u-skeleton-fillet">
              报销金额：{{li.fMoney}}元
            </view>
            <view class="cons u-skeleton-fillet">
              申请时间：{{li.fCreateTime}}
            </view>

            <view class="state state2 u-skeleton-fillet"
              :style="{color:$api.getCheck(li.fStatus).color}">
              {{$api.getCheck(li.fStatus).name}}
            </view>
          </view>
        </view>

      </view>
    </view>
    <view class="viewbbutton" :style="{height:height}">
      <button class="sendBomBtn" @click="add">新增报销</button>
    </view>
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF">
    </u-skeleton>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: this.but_height(),
      clist: [3],
      isAllList: 1,
      page: 10,
      status: 'loading',
      loading: true
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '报销审批'
    })
  },
  onShow() {
    this.defaultData()
    this.getList()
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.page += 10
      this.getList()
    }
  },
  methods: {
    defaultData() {
      this.isAllList = 1
      this.page = 10
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let that = this,
        params = {
          PageSize: this.page
        }
      this.$axios('api/WorkBill/ListPaged', 'post', params).then(res => {
        that.loading = false
        let data = res.Value.List
        if (that.page == 1) {
          that.clist = []
        }
        if (data.length == 0) {
          that.isAllList = 0
          that.status = 'nomore'
        } else {
          that.clist = data
        }
      })
    },
    add() {
      uni.navigateTo({
        url: 'expense_add'
      })
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: 'expense_detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss">
.clist {
  .list {
    background-color: #ffffff;
    margin-bottom: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;

    .userRow {
      .uimg {
        image {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 32rpx;
          background-color: #f2f2f2;
        }
      }

      .send {
        font-size: 32rpx;
        font-weight: 400;
        color: #34404a;
        line-height: 44rpx;
      }

      .time {
        font-size: 22rpx;
        font-weight: 400;
        color: #979797;
        line-height: 32rpx;
      }
    }

    .cons {
      font-size: 24rpx;
      font-weight: 400;
      color: #979797;
      line-height: 34rpx;
      margin-bottom: 8rpx;
    }
  }
}
</style>
